<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="100px"
			>
				<el-form-item :label="`${$t('common.belong_merchant')}:`">
					<el-select
						v-model="queryData.merchantId"
						size="medium"
						v-symbols
						clearable
						style="width: 180px"
						:placeholder="$t('common.select_all')"
					>
						<el-option
							v-if="isZk"
							:label="`${$t('system.all')}`"
							value="0"
						></el-option>
						<el-option
							v-for="item in merchantList"
							:key="item.id"
							:label="item.merchantName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="`${$t('system.name')}:`">
					<el-input
						v-model="queryData.userName"
						v-symbols
						clearable
						size="medium"
						style="width: 200px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item :label="`${$t('system.staff_login_log.ip')}:`">
					<el-input
						v-model.trim="queryData.ip"
						v-input="{ name: 'noEmpty' }"
						clearable
						size="medium"
						:maxlength="20"
						style="width: 200px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>

				<el-form-item style="margin-left: 30px">
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						:loading="loading"
						:disabled="loading"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						:disabled="loading"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					prop="merchantName"
					align="center"
					:label="$t('common.belong_merchant')"
					show-overflow-tooltip
					min-width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					:label="$t('system.name')"
					show-overflow-tooltip
					min-width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					:label="$t('system.staff_login_log.time')"
					show-overflow-tooltip
					min-width="200"
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="ip"
					align="center"
					:label="$t('system.staff_login_log.ip')"
					show-overflow-tooltip
					min-width="200"
				>
					<template slot="header">
						{{ $t('system.staff_login_log.ip') }}
					</template>
					<template slot-scope="scope">
						{{ scope.row.ip || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="deviceId"
					align="center"
					:label="$t('common.components.device')"
					show-overflow-tooltip
					min-width="280"
				>
					<template slot-scope="scope">
						{{ scope.row.deviceId || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="loginRegion"
					align="center"
					:label="$t('system.staff_login_log.region')"
					show-overflow-tooltip
					min-width="150"
				>
					<template slot-scope="scope">
						{{ scope.row.loginRegion || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="loginStatus"
					align="center"
					:label="$t('common.status')"
					show-overflow-tooltip
					min-width="120"
				>
					<template slot-scope="scope">
						<span
							v-if="scope.row.loginStatus === 0"
							class="redColor"
						>
							{{
								typeFilter(
									scope.row.loginStatus,
									'userLoginStatus'
								) || '-'
							}}
						</span>
						<span
							v-else-if="scope.row.loginStatus > 0"
							class="enableColor"
						>
							{{
								typeFilter(
									scope.row.loginStatus,
									'userLoginStatus'
								) || '-'
							}}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="loginRegion"
					align="center"
					:label="$t('主机号')"
					show-overflow-tooltip
					min-width="200"
				>
					<template slot-scope="scope">
						{{ scope.row.hostName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="loginRegion"
					align="center"
					:label="$t('MAC地址')"
					show-overflow-tooltip
					min-width="180"
				>
					<template slot-scope="scope">
						{{ scope.row.macAddress || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="loginRegion"
					align="center"
					:label="$t('主板ID')"
					show-overflow-tooltip
					min-width="350"
				>
					<template slot-scope="scope">
						{{ scope.row.baseBoardId || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'

export default {
	name: routerNames.staffLoginLog,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				userName: undefined,
				ip: undefined
			},
			dataList: []
		}
	},
	computed: {
		isZk() {
			return this.$store.getters.isZk
		},
		merchantList() {
			return this.$store.getters.merchantList || []
		}
	},
	methods: {
		loadData() {
			this.loading = true
			const params = {
				...this.getParams(this.queryData)
			}
			this.$api
				.queryStaffLoginLog(params)
				.then((res) => {
					this.loading = false
					const { record, totalRecord } = res.data || {}
					this.dataList = Array.isArray(record)
						? Object.freeze(record)
						: []
					this.total = totalRecord || 0
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.queryData = {
				userName: undefined,
				ip: undefined
			}
			this.pageNum = 1
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
</style>
